<template>
    <view class="goodsList">
        <u-modal :show="mshow" @confirm="mconfirm" title="提示" :content='mcontent'></u-modal>
        <view class="searchBox">
            <u-search v-model="name" @search="search" @custom="search" @change="search"></u-search>
        </view>
        <image class="wssj" src="https://lgqj.oss-cn-beijing.aliyuncs.com/2022/05/06/165183860558827bd76c457b41dd5c7a9b53eae3e9f2.png"
            mode="aspectFit" @click="gotonewgood()"></image>
        <!-- <view>
            <u-tabs :activeStyle="{color: '#004EE8',fontWeight: 'bold',transform: 'scale(1.05)'}"
                :inactiveStyle="{color: '#666',transform: 'scale(1)'}" :list="promotetypeList" lineWidth="30" @click="click"></u-tabs>
        </view> -->
        <view class="jiange">

        </view>
        <view class="goodsBox">
            <view class="goodsItem vh-cs" v-for="(item,index) in goodList" :key="index" @click="gotodetail(item)">
                <view class="imgbox">
                    <image :src="item.images?item.images.split(',')[0]?item.images.split(',')[0]:'../../static/imgs/nodata.png':'../../static/imgs/nodata.png'"></image>
                </view>
                <view class="itemR">
                    <view class="goodstitle sl2">
                        {{item.name?item.name:''}}
                        <!-- 满3件7折 水性无溶剂环保高硬度 瓷砖美满3件7折 水性无溶剂环保高硬度 瓷砖美 -->
                    </view>
                    <view>
                        <text class="moneyicon">￥</text>
                        <text class="moneynum">{{item.price?item.price:0}}</text>
                    </view>
                    <view>
                        <text class="guige" v-if="item.format">
                            {{item.format?item.format:''}}
                        </text>
                        <!-- <text class="guige">
                            库存3000
                        </text> -->
                    </view>
                    <view class="dianpu sl1">
                            {{item.machName?item.machName:''}}
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script>
export default {
    data() {
        return {
            value5: '',

            promotetypeList: [
                {
                    name: '综合',
                }, {
                    name: '销量',
                }, {
                    name: '更多筛选',
                },
            ],
            mcontent: '',
            mshow: false,
            number: 1,
            size: 10,
            goodList: [],
            name: ''
        }
    },
    watch: {
        value1(newValue, oldValue) {
            // console.log('value1', newValue);
        }
    },
    //页面显示
    onShow() {
        this.userInfo = this.$store.state.userInfo ? this.$store.state.userInfo : ''
        this.getgoodList()
    },
    methods: {
        search() {
            console.log(this.name)
            this.getgoodList()
        },
        mconfirm() {
            this.mshow = false
        },
        gotonewgood() {
            console.log(this.userInfo.roleName);
            if (this.userInfo) {
                if (this.userInfo.roleName != '商家角色') {
                    this.mshow = true
                    this.mcontent = '请使用商家账号上传商品'
                }
                else {
                    uni.navigateTo({
                        url: '/pages/newgood/newgood',
                    });
                }
            }
            else {
                this.mshow = true
                this.mcontent = '请到用户中心登录后上传商品'
            }
        },
        change(e) {
            console.log(e);
        },
        clickIcon() {
            uni.$u.toast('点击了左侧图标')
        },
        getgoodList() {
            let param = {
                size: this.size,
                number: this.number,
                name: this.name,
                // status:'',
            }
            this.$http.get('/app/goods_list', param).then(val => {
                console.log(val)
                if (this.number == 1) {
                    this.goodList = []
                }
                this.goodList = this.goodList.concat(val.data.list)
                this.goodListtotal = val.data.total
            })
        },
        //gotodetail详情
        gotodetail(item) {
            console.log(item)
            uni.navigateTo({
                url: '/pages/goodDetail/goodDetail?id=' + item.id,
            });
        }
    },
    onReachBottom() {
        if (this.goodListtotal != this.goodList.length) {
            this.number++
            this.getgoodList()
        }
    },
}
</script>

<style lang="scss">
.goodsList {
    background-color: #fff;
    min-height: 100vh;
    .searchBox {
        padding: 20rpx;
        .u-search__content {
            padding: 10rpx;
            input,
            .uicon-search {
                font-size: 30rpx !important;
            }
        }
    }
    .wssj {
        width: 100%;
        height: 12vw;
    }
    .u-tabs__wrapper__nav__item,
    .swiper-item {
        width: 33% !important;
    }
    .u-tabs__wrapper__nav__line {
        width: 60rpx !important;
        // width: 100px !important;
        height: 6rpx !important;
        background: $themeColor !important;
        border-radius: 12rpx !important;
    }
    .jiange {
        height: 20rpx;
        background: #f9f9f9;
    }
    .goodsBox {
        padding: 0 32rpx 32rpx 32rpx;
        .goodsItem {
            margin-top: 32rpx;
            .imgbox {
                image {
                    width: 250rpx;
                    height: 250rpx;
                    border-radius: 20rpx;
                }
                margin-right: 20rpx;
            }
            .itemR {
                width: calc(100vw - 300rpx);
                .goodstitle {
                    font-size: 28rpx;
                    font-weight: 400;
                    color: #333333;
                    line-height: 37rpx;
                }
                .moneyicon {
                    color: $themeColor;
                    font-size: 26rpx;
                }
                .moneynum {
                    font-size: 46rpx;
                    font-weight: bold;
                    color: #004ee8;
                    line-height: 1.6;
                }
                .guige {
                    background: #f1f6ff;
                    border-radius: 8rpx;
                    border: 1rpx solid $themeColor;
                    font-size: 24rpx;
                    font-weight: 400;
                    color: $themeColor;
                    line-height: 33rpx;
                    padding: 5rpx 15rpx;
                    white-space:nowrap;
                    margin-right: 15rpx;
                }
                .dianpu {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #555555;
                    line-height: 1.6;
                    margin-top: 15rpx;
                }
            }
        }
    }
}
</style>
